<template>
  <div class="menu">
    <file></file>
    <edit></edit>
    <add></add>
    <viewPort></viewPort>
    <help></help>
  </div>
</template>
<script setup lang="ts">
import file from './file/index.vue'
import add from './add/index.vue'
import edit from './edit/index.vue'
import viewPort from './viewport/index.vue'
import help from './help/index.vue'
</script>

<style lang="scss" scoped>
.menu {
  display: flex;

  .menu-item {
    position: relative;
    margin-left: 10px;
    padding: 3px 8px;
    color: var(--base-color);
    border-radius: 5px;

    &:hover {
      background-color: var(--input-background);

      .menu-popup {
        display: block;
      }
    }

    .menu-popup {
      display: none;
      position: absolute;
      min-width: 220px;
      left: 0;
      background-color: var(--menu-popup);
      padding: 5px;
      border-radius: 5px;
      border: 1px solid var(--base-border);

      .menu-sub-item {
        position: relative;
        padding: 4px 10px;
        border-radius: 5px;

        &:hover {
          color: var(--active-color);
          background-color: var(--header-background);

          .menu-popup {
            display: block;
          }
        }
      }

      .menu-popup {
        display: none;
        left: 100%;
        top: -50%;
      }
    }
  }
}
</style>
